<template>
  <div 
    :class="[
      'bx-range-input',
      'bx-glass',
      {
        'bx-range-input--disabled': disabled,
        'bx-range-input--focused': focused
      }
    ]"
  >
    <BxInput
      v-model="startValue"
      :placeholder="startPlaceholder"
      :disabled="disabled"
      :readonly="readonly"
      :size="size"
      @focus="handleFocus('start')"
      @blur="handleBlur('start')"
      @change="handleStartChange"
      class="bx-range-input__start"
    />
    <span class="bx-range-input__separator">{{ separator }}</span>
    <BxInput
      v-model="endValue"
      :placeholder="endPlaceholder"
      :disabled="disabled"
      :readonly="readonly"
      :size="size"
      @focus="handleFocus('end')"
      @blur="handleBlur('end')"
      @change="handleEndChange"
      class="bx-range-input__end"
    />
    <BxIcon 
      v-if="clearable && (startValue || endValue)"
      name="x-circle"
      class="bx-range-input__clear"
      @click.stop="handleClear"
    />
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import BxInput from '../input/BxInput.vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxRangeInput',
  components: {
    BxInput,
    BxIcon
  },
  props: {
    modelValue: {
      type: Array,
      default: () => ['', '']
    },
    startPlaceholder: {
      type: String,
      default: '开始'
    },
    endPlaceholder: {
      type: String,
      default: '结束'
    },
    separator: {
      type: String,
      default: ' - '
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  emits: ['update:modelValue', 'change', 'focus', 'blur', 'clear'],
  setup(props, { emit }) {
    const startValue = ref(props.modelValue[0])
    const endValue = ref(props.modelValue[1])
    const focused = ref(false)

    watch(() => props.modelValue, (newVal) => {
      startValue.value = newVal[0]
      endValue.value = newVal[1]
    }, { immediate: true })

    const emitChange = () => {
      const newValue = [startValue.value, endValue.value]
      emit('update:modelValue', newValue)
      emit('change', newValue)
    }

    const handleStartChange = (value) => {
      startValue.value = value
      emitChange()
    }

    const handleEndChange = (value) => {
      endValue.value = value
      emitChange()
    }

    const handleFocus = (type) => {
      focused.value = true
      emit('focus', type)
    }

    const handleBlur = (type) => {
      focused.value = false
      emit('blur', type)
    }

    const handleClear = () => {
      startValue.value = ''
      endValue.value = ''
      emitChange()
      emit('clear')
    }

    return {
      startValue,
      endValue,
      focused,
      handleStartChange,
      handleEndChange,
      handleFocus,
      handleBlur,
      handleClear
    }
  }
}
</script>

<style scoped>
.bx-range-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bx-glass-border);
  border-radius: var(--bx-radius-medium);
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  transition: all var(--bx-transition-medium);
  font-family: var(--bx-font-family);
}

.bx-range-input:hover {
  border-color: var(--bx-glass-border-hover);
  background: var(--bx-glass-bg-hover);
}

.bx-range-input--focused {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.bx-range-input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bx-range-input__start,
.bx-range-input__end {
  flex: 1;
  border: none;
  background: transparent;
  box-shadow: none;
}

.bx-range-input__start :deep(.bx-input__inner),
.bx-range-input__end :deep(.bx-input__inner) {
  padding: 8px 12px;
  text-align: center;
}

.bx-range-input__separator {
  color: var(--bx-text-secondary);
  padding: 0 4px;
}

.bx-range-input__clear {
  font-size: 14px;
  color: var(--bx-text-tertiary);
  cursor: pointer;
  margin-right: 8px;
}

.bx-range-input__clear:hover {
  color: var(--bx-text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-range-input {
    width: 100%;
  }
}
</style>

